<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8" />
    <title>固定布局，加载顶部、底部</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-text-size-adjust: none;
      }
      html {
        font-size: 10px;
      }
      body {
        background-color: #f5f5f5;
        font-size: 1.2em;
      }
      .outer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        -webkit-box-orient: vertical;
        box-orient: vertical;
        -webkit-flex-direction: column;
        flex-direction: column;
      }
      .header {
        position: relative;
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #ccc;
        background-color: #eee;
      }
      .header h1 {
        text-align: center;
        font-size: 2rem;
        font-weight: normal;
      }
      .header .btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 4em;
        height: 100%;
        text-align: center;
        color: #06c;
        font-size: 1.4rem;
        background-color: #ccc;
      }
      .header .btn:active {
        background-color: #aaa;
        color: #fff;
      }
      .inner {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #fff;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
      }
      .inner .item {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 3.125%;
        border-bottom: 1px solid #ddd;
        color: #333;
        text-decoration: none;
      }
      .inner .item img {
        display: block;
        width: 40px;
        height: 40px;
        border: 1px solid #ddd;
      }
      .inner .item h3 {
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        max-height: 40px;
        overflow: hidden;
        line-height: 20px;
        margin: 0 10px;
        font-size: 1.2rem;
      }
      .inner .item .date {
        display: block;
        height: 20px;
        line-height: 20px;
        color: #999;
      }
      .opacity {
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
      }
      @-webkit-keyframes opacity {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes opacity {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
    <link rel="stylesheet" href="../dist/dropload.css" />
  </head>
  <body>
    <div class="outer">
      <div class="header">
        <h1>头部</h1>
        <a href="javascript:;" class="btn lock">锁定</a>
        <div class="footer" style="position: absolute; left: 0; top: 0; background-color: #fff;" >
          <a href=""></a>
          <a href="#"></a>
        </div>
      </div>
      <div class="inner">
        <div class="lists">
          <a class="item" href="#">
            <img
              src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg"
              alt=""
            />
            <h3>1文字描述文字描述</h3>
            <span class="date">2014-14-14</span>
          </a>
          <a class="item" href="#">
            <img
              src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg"
              alt=""
            />
            <h3>
              2文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述
            </h3>
            <span class="date">2014-14-14</span>
          </a>
        
          <a class="item" href="#">
            <img
              src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg"
              alt=""
            />
            <h3>7文字描述文字描述文字描述文字描述文字描述</h3>
            <span class="date">2014-14-14</span>
          </a>
          <a class="item" href="#">
            <img
              src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg"
              alt=""
            />
            <h3>8文字描述文字描述文字描述文字描述文字描述</h3>
            <span class="date">2014-14-14</span>
          </a>
          <a class="item" href="#">
            <img
              src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg"
              alt=""
            />
            <h3>9文字描述文字描述文字描述文字描述文字描述</h3>
            <span class="date">2014-14-14</span>
          </a>
          <a class="item" href="#">
            <img
              src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg"
              alt=""
            />
            <h3>10文字描述文字描述文字描述文字描述文字描述</h3>
            <span class="date">2014-14-14</span>
          </a>
          <a class="item" href="#">
            <img
              src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg"
              alt=""
            />
            <h3>11文字描述文字描述文字描述文字描述文字描述</h3>
            <span class="date">2014-14-14</span>
          </a>
          <a class="item" href="#">
            <img
              src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg"
              alt=""
            />
            <h3>12文字描述文字描述文字描述文字描述文字描述</h3>
            <span class="date">2014-14-14</span>
          </a>
        </div>
      </div>
    </div>
    <!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
    <script src="js/zepto.min.js"></script>
    <script src="../dist/dropload.min.js"></script>
    <script>
      $(function () {
        // 按钮操作
        $('.header .btn').on('click', function () {
          var $this = $(this)
          if (!!$this.hasClass('lock')) {
            $this.attr('class', 'btn unlock')
            $this.text('解锁')
            // 锁定
            dropload.lock()
            $('.dropload-down').hide()
          } else {
            $this.attr('class', 'btn lock')
            $this.text('锁定')
            // 解锁
            dropload.unlock()
            $('.dropload-down').show()
          }
        })

        // dropload
        var dropload = $('.inner').dropload({
          domUp: {
            domClass: 'dropload-up',
            domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate: '<div class="dropload-update">↑释放更新</div>',
            domLoad:
              '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
          },
          domDown: {
            domClass: 'dropload-down',
            domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad:
              '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData: '<div class="dropload-noData">暂无数据</div>',
          },
          loadUpFn: function (me) {
            $.ajax({
              type: 'GET',
              url: 'json/update.json',
              dataType: 'json',
              success: function (data) {
                var result = ''
                for (var i = 0; i < data.lists.length; i++) {
                  result +=
                    '<a class="item opacity" href="' +
                    data.lists[i].link +
                    '">' +
                    '<img src="' +
                    data.lists[i].pic +
                    '" alt="">' +
                    '<h3>' +
                    data.lists[i].title +
                    '</h3>' +
                    '<span class="date">' +
                    data.lists[i].date +
                    '</span>' +
                    '</a>'
                }
                // 为了测试，延迟1秒加载
                setTimeout(function () {
                  $('.lists').html(result)
                  // 每次数据加载完，必须重置
                  dropload.resetload()
                }, 1000)
              },
              error: function (xhr, type) {
                alert('Ajax error!')
                // 即使加载出错，也得重置
                dropload.resetload()
              },
            })
          },
          loadDownFn: function (me) {
            $.ajax({
              type: 'GET',
              url: './json/more.json',
              dataType: 'json',
              success: function (data) {
                var result = ''
                for (var i = 0; i < data.lists.length; i++) {
                  result +=
                    '<a class="item opacity" href="' +
                    data.lists[i].link +
                    '">' +
                    '<img src="' +
                    data.lists[i].pic +
                    '" alt="">' +
                    '<h3>' +
                    data.lists[i].title +
                    '</h3>' +
                    '<span class="date">' +
                    data.lists[i].date +
                    '</span>' +
                    '</a>'
                }
                // 为了测试，延迟1秒加载
                setTimeout(function () {
                  $('.lists').append(result)
                  // 每次数据加载完，必须重置
                  dropload.resetload()
                }, 1000)
              },
              error: function (xhr, type) {
                alert('Ajax error!')
                // 即使加载出错，也得重置
                dropload.resetload()
              },
            })
          },
        })
      })
    </script>
  </body>
</html>
